<script setup>
import ArticleCard from '@components/ArticleCard.vue';
import CategoryCard from '@components/CategoryCard.vue';

const articles = ref([
  { title: '文章1', category: '前端', date: '2023-12-01' },
  { title: '文章2', category: '后端', date: '2023-12-02' }
]);
</script>

<template>
    <div class="wrapper">
        <div class="sidebar">
            <CategoryCard />
        </div>
        <div class="content">
            <ArticleCard v-for="article in articles" :key="article.title" :article="article" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--gap);

    .sidebar {
        width: 100%;
        min-height: 600px;
    }

    .content {
        width: 100%;
    }
}


// 媒体查询
@media (max-width: 768px) {
    .wrapper {
        grid-template-columns: 1fr;

        .sidebar {
            width: 100%;
            margin-bottom: var(--gap);
        }
    }
}
</style>